<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自适应设置</title>
    <link rel="stylesheet" href="../../resources/lib/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">

</head>
<body>

<style>
    .tab-h2 {
        color:#0059b2;
        font-size:20px;
        letter-spacing: 1px;
        text-align:center;
        margin:45px 0 10px;
    }
    .tab-p {
        font-size: 15px;
        letter-spacing: 2px;
        text-align:center;
        color: #999;
        margin:15px 0 45px;
    }



    @media (min-width: 768px) {
        .tab-h2 {
            font-size:10px;
        }
        .tab-p {
            font-size: 10px;
        }
        }
    @media (min-width: 992px) {}
    /* 中等屏幕（桌面显示器，大于等于992px） */
    @media (min-width: 992px) {
        .tab-h2 {
            font-size:50px;
        }
        .tab-p {
            font-size: 50px;
        }
    }
</style>
<div class="container">
    <h2 class="tab-h2">「这里测试文字自适应」</h2>
    <p class="tab-p">这里测试文字自适应，这里测试文字自适应，这里测试文字自适应！</p>
</div>
<script type="text/javascript" src="../../resources/lib/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>